import React, { useEffect, useState, FC } from 'react'
import { useHistory } from 'react-router-dom'
import { Form, Input, Button, message, Row,Col, Spin ,Tabs} from 'antd'
import { modalLayoutMd } from '@/config/layout'
import { closeTabAction, getQuery } from '@/assets/js/publicFunc'
import MySelect from '@/components/common/mySelect'
import Png from './123.jpg';
const { TabPane } = Tabs;
const FormView: FC = () => {
  const query = getQuery()
  const { id } = query

  const [form] = Form.useForm()
  const { setFieldsValue, resetFields } = form

  const [loading, setLoading] = useState<boolean>(false)

  const history: CommonObjectType = useHistory()

  // 编辑状态
  useEffect(() => {
    // if (!id) {
    //   resetFields()
    //   return
    // }
    // setFieldsValue({
    //   name: 'Jacob Jørgensen',
    //   gender: 'male',
    //   avatar: 'https://randomuser.me/api/portraits/thumb/men/84.jpg',
    //   content: 'jacob.jorgensen@example.com',
    //   status: Math.random() > 0.5
    // })
  }, [id, resetFields, setFieldsValue])

  const handleSubmit = () => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
      message.success('修改成功')
      const returnUrl = '/user/list'
      closeTabAction(history, returnUrl)
    }, 1000)
  }

  return (
    <Spin spinning={loading}>
      {
        id?<></>:<>
          <Form form={form} {...modalLayoutMd} onFinish={handleSubmit}>
            <Form.Item
              label="模板编号"
              name="name"
            >
              <span>ZD161778293713696</span><span style={{color:'#D9001B',marginLeft:'10px'}}>模板编号自动生成</span>
            </Form.Item>
            <Form.Item
              label="模板名称"
              name="name"
              rules={[
                {
                  required: true,
                  message: '请输入模板名称'
                }
              ]}
            >
              <Input placeholder="请输入模板名称" />
            </Form.Item>
            <Form.Item
              label="模板类型"
              name="gender"
              rules={[
                {
                  required: true,
                  message: '请选择模板类型'
                }
              ]}
            >
              <MySelect
                data={[
                  { name: '请选择模板类型', key: '' },
                  { name: '日报', key: '1' },
                  { name: '月报', key: '2' },
                  { name: '年报', key: '3' }
                ]}
              />
            </Form.Item>
            <Form.Item
              label="模板内容"
              name="gender"
              rules={[
                {
                  required: true,
                  message: '请选择模板内容'
                }
              ]}
            >
              <Row>
                <Col span={12}>
                  <Input type="file" />
                </Col>
                <Col span={10} offset={2}>
                  <Button type="primary" htmlType="submit">
                    提交
                  </Button>
                </Col>
              </Row>
              
            </Form.Item>
          </Form>

        </>
      }

      <Tabs defaultActiveKey="1" type="card">
        <TabPane tab="能投日报" key="1">
          <img src={Png} style={{width:'100%'}} alt=""/>
        </TabPane>
        <TabPane tab="火电日报" key="2">
          <img src={Png} style={{width:'100%'}} alt=""/>
        </TabPane>
        <TabPane tab="光伏日报" key="3">
          <img src={Png} style={{width:'100%'}} alt=""/>
        </TabPane>
      </Tabs>
    </Spin>
  )
}

export default FormView
